import { Link, useLocation } from "wouter";
import { 
  Activity, 
  Settings, 
  Server, 
  Scale, 
  BarChart3, 
  Shield,
  ArrowRightLeft,
  HelpCircle 
} from "lucide-react";
import { cn } from "@/lib/utils";

const navigation = [
  { name: "仪表板", href: "/", icon: Activity },
  { name: "代理配置", href: "/proxy-config", icon: Settings },
  { name: "服务器管理", href: "/server-management", icon: Server },
  { name: "负载均衡", href: "/load-balancing", icon: Scale },
  { name: "监控日志", href: "/monitoring", icon: BarChart3 },
  { name: "安全设置", href: "/security", icon: Shield },
];

export function Sidebar() {
  const [location] = useLocation();

  return (
    <aside className="w-64 bg-white shadow-sm border-r border-slate-200 flex flex-col">
      {/* Logo Section */}
      <div className="p-6 border-b border-slate-200">
        <div className="flex items-center space-x-3">
          <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
            <ArrowRightLeft className="text-white w-4 h-4" />
          </div>
          <div>
            <h1 className="text-xl font-semibold text-slate-800">FRP Manager</h1>
            <p className="text-xs text-slate-500">代理管理系统</p>
          </div>
        </div>
      </div>

      {/* Navigation Menu */}
      <nav className="flex-1 p-4">
        <ul className="space-y-2">
          {navigation.map((item) => {
            const isActive = location === item.href;
            return (
              <li key={item.name}>
                <Link href={item.href}>
                  <a
                    className={cn(
                      "flex items-center space-x-3 px-3 py-2 rounded-lg transition-colors",
                      isActive
                        ? "bg-primary text-white"
                        : "text-slate-600 hover:bg-slate-100"
                    )}
                  >
                    <item.icon className="w-4 h-4" />
                    <span>{item.name}</span>
                  </a>
                </Link>
              </li>
            );
          })}
        </ul>
      </nav>

      {/* Status Footer */}
      <div className="p-4 border-t border-slate-200">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse-dot"></div>
            <span className="text-sm text-slate-600">服务运行中</span>
          </div>
          <button className="text-slate-400 hover:text-slate-600">
            <HelpCircle className="w-4 h-4" />
          </button>
        </div>
      </div>
    </aside>
  );
}
